<template>
  <Page background="#15283F">
    <p-header :title="symbol + ' Deposit'"/>
    <ScrollView orientation="vertical" >
      <StackLayout>
        <StackLayout class="block" orientation="horizontal">
          <GridLayout columns="*, auto" rows="auto, auto" verticalAlignment="center">
            <Label class="label" col="0" row="0" text="Deposit Address"/>
            <Label class="address" col="0" row="1" :text="url" textWrap/>
            <Button class="copy func-btn" col="1" rowSpan="2" text="Copy Address" @tap="copyAddress"/>
          </GridLayout>
        </StackLayout>
        <label class="tip" text="Tips"/>
        <label textWrap="true" v-for="(item, index) in tips" class="tip-content" :text="item" :key="index"/>
      </StackLayout>
    </ScrollView>
  </Page>
</template>
<script>
import Header from '~/components/common/Header'
const clipboard = require("nativescript-clipboard");
const Toast = require("nativescript-toast");
import loaderGen, {loadingOption} from '~/utils/loading'
import {dataBus} from '~/business/DataBus'

export default {
  props: ['symbol'],
  data()  {
    return {
      tips: [],
      url: '',
      minDeposit: 0,
    }
  },
  components: {
    'p-header': Header,
  },
  methods: {
    copyAddress() {
      clipboard.setText(this.url).then(function() {
        Toast.makeText("Copy Success").show()
      })
    },
    calTips() {
      this.tips = [`• Please only send ${this.symbol} to the above address. Failure to do so will lead to loss of funds. `,
      `• 7Exchange only support simple send methods for ${this.symbol}, any other methods (such as send all) will not be credited.`,
      `• Deposits will arrive after 1 confirmation from the entire network, and is available to withdraw after 6 confirmations.`, 
      `• Minimum deposit : ${this.minDeposit} ${this.symbol}. Sending less than the minimum will not be credited or refunded.`, 
      "• Your deposit address is static, meaning it won’t change frequently. If it does change, you will be properly alerted (either through announcement or email).", 
      "• Please ensure that your browser and computer are both secure and protected from third party intrusion."]
    }
  },
  mounted() {
    const loader = loaderGen()
    loader.show(loadingOption)
    const self = this
    dataBus.loadWalletCoin(this.symbol, {
      onSuccess: ret => {
        loader.hide()
        self.url = ret.address
        self.minDeposit = ret.depositConfig.minValue
        self.calTips()
      },
      onError: (code, msg) => {
        loader.hide()
        alert(msg)
      }
    })
  }
}
</script>
<style scoped>
.block {
  background: #274867;
  height: 150;
  margin-left: 11;
  margin-right: 11;
  margin-top: 11;
}
.label {
  color: #4B93AF;
  font-size: 12;
  margin-left: 30;
}
.address {
  color: white;
  font-size: 12;
  margin-top: 5;
  margin-left: 30;
  margin-right: 10;
}
.copy {
  font-size: 12;
  border-radius: 15;
  width: 142;
  height: 30;
  margin-right: 14;
  padding: 0;
}
.tip {
  color: #6292BE;
  font-size: 16;
  margin-top: 28;
  margin-left: 22;
}
.tip-content {
  color: #6292BE;
  font-size: 14;
  margin-left: 22;
  margin-right: 11;
}
</style>
